<template>
    <div id="app">
        <!--<img src="./assets/logo.png">-->
        <!--<h1>{{ msg }}</h1>-->
        <!--<ul>-->
        <!--<li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>-->
        <!--<li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>-->
        <!--<li><a href="https://gitter.im/vuejs/vue" target="_blank">Gitter Chat</a></li>-->
        <!--<li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>-->
        <!--</ul>-->
        <!--<h2>Ecosystem</h2>-->
        <!--<ul>-->
        <!--<li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>-->
        <!--<li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>-->
        <!--<li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>-->
        <!--<li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>-->
        <!--</ul>-->
        <h1>{{title}}</h1>
        <input v-model="a" v-on:keyup.13="add">
        <button v-on:click="add">添加</button>
        <ul>
            <li v-for="(todo,i) in todos" :class="{del:todo.done}">
                <label>
                    {{i+1}}.{{todo.value}}
                </label>
                <time>{{todo.created|date}}</time>
            </li>
        </ul>
        <allo v-bind:total="todos.length" :done="done"></allo>
    </div>
</template>

<!--<script type="text/x-template" id="lan">-->
    <!--window.onload = function () {-->
    <!--Vue.component('all', {-->
    <!--// camelCase in JavaScript-->
    <!--props: ['todo','done'],-->
    <!--template: '#lan'-->
    <!--});}-->
    <!--<span>总共{{todo}}个事项。{{done}}个完成。{{todo-done}}个未完成。</span>-->
<!--</script>-->

<script>
    import allo from './allo.vue'       //导入
    import moment from 'moment'
    import 'moment/locale/zh-cn'
    moment.locale('zh-cn')

    export default {
        name: 'app',
        components:{allo},     //组件
        data () {
            return {
                msg: 'Welcom',
                title: 'vue_lalal',
                a: '',
                todos: [
                    {value: '阅读一本书', done: false, created: Date.now()},
                    {value: '补充代码', done: true, created: Date.now()},
                    {value: '心得', done: false, created: Date.now()}

                ]
            }
        },
        methods: {
            add: function () {
                var x = {value: this.a, done: false, created: Date.now()};
                this.todos.push(x);
            }
        },
        filters: {
            date(v){
//      return new Date(v).getHours() + ":" + new Date(v).getMinutes() + ":" + new Date(v).getSeconds()
                return moment(v).calendar()
            }
        },
        computed: {
            done: function () {
                var s = 0;
                for (var i = 0; i < this.todos.length; i++) {
                    if (this.todos[i].done) {
                        s++;
                    }
                }
                return s;
            }
        }
    }
</script>
<style>
    .del {
        text-decoration: line-through;
        color: #7f7f7f;
    }

    ul {
        list-style-type: none;
        padding: 0;
    }
</style>
<!--<style>-->
<!--#app {-->
<!--font-family: 'Avenir', Helvetica, Arial, sans-serif;-->
<!-- -webkit-font-smoothing: antialiased;-->
<!-- -moz-osx-font-smoothing: grayscale;-->
<!--text-align: center;-->
<!--color: #2c3e50;-->
<!--margin-top: 60px;-->
<!--}-->

<!--h1, h2 {-->
<!--font-weight: normal;-->
<!--}-->

<!--ul {-->
<!--list-style-type: none;-->
<!--padding: 0;-->
<!--}-->
<!--ul.b{-->
<!--list-style-type: none;-->
<!--padding: 0;-->
<!--}-->

<!--li {-->
<!--display:inline-block;-->
<!--margin: 0 10px;-->
<!--}-->
<!--li.b {-->
<!--margin: 0 10px;-->
<!--}-->


<!--a {-->
<!--color: #42b983;-->
<!--}-->
<!--</style>-->
